<template>
	<view>
		<view class="loading" v-if="loading">
			<u-loading mode="circle"></u-loading>
		</view>
		<view v-if="fail" class="" style="padding-top: 300rpx;">
			<u-empty mode="data"></u-empty>
		</view>
		<block v-if="!loading && !fail">
			<view class="box" v-if="afterSaleState != ''">
				<view class="title">售后状态 <view class="state" style="color: #FF4E47;">{{filterState()}}</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="box">
				<view class="title">{{scene == 'returnGoods' ? '选择退货商品' : '售后商品'}}</view>
				<view class="goods-list" v-if="goodsInfo != ''">
					<block v-for="(item,index) in goodsInfo.items" :key="item.id">
						<view class="goods" @click="choiceGoods(index)">
							<view class="check" v-if="scene == 'returnGoods'">
								<radio :checked="item.check" color="#FF4E46"></radio>
							</view>
							<view class="info">
								<u-image :src="goodsPhoto(item.goodsPhoto)" width="144" height="144" border-radius="10"></u-image>
								<view class="info-content">
									<view class="">{{item.goodsName}}</view>
									<view class="count">x{{item.goodsCount}}</view>
									<view class="money"><text v-if="payType!='RED_INTEGRAL'">￥</text>{{item.totalPrice}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="title back-money" v-if="isRedintegral">
					<view class="">退还积分</view>
					<view class=""><text></text>{{total_integral}}</view>
					<!-- <view class="" v-else><text></text>{{afterSaleState.returnPrice}}</view> -->
				</view>
				<view class="title back-money" v-else>
					<view class="">退款金额</view>
					<view class="" v-if="afterSaleState == ''"><text>￥</text>{{goodsInfo.totalPrice}}</view>
					<view class="" v-else><text>￥</text>{{afterSaleState.returnPrice}}</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="box">
				<view class="title">{{afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330 ? '选择退款原因' : afterSaleState.returnReason}}</view>
				<view class="back-list" v-if="afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330">
					<view class="item" v-for="(item,index) in refundList" :key="item.id" @click="choiceRefund(index)">
						<view class="check">
							<radio :checked="refundIndex == index" color="#FF4E46"></radio>
						</view>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
				<u-field v-if="afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330"
				 v-model="buyerReturnContext" :field-style="fieldStyle" :border-bottom="false" type="textarea" placeholder="请输入退款原因" label-width="0"></u-field>
				<u-field v-else disabled v-model="buyerReturnContext" :border-bottom="false" type="textarea" label-width="0"></u-field>
			</view>
			<block v-if="uploadImgs != ''">
				<u-gap></u-gap>
				<view class="box">
					<view class="title">上传凭证</view>
					<view class="upload">
						<view class="img" v-for="(item,index) in uploadImgs" :key="index">
							<u-image :src="item" width="147" height="147" border-radius="10"></u-image>
							<view class="close" v-if="afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330">
								<u-icon @click="close(index)" name="close" color="#ffffff"></u-icon>
							</view>
						</view>
						<view v-if="afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330"
						 class="add" @click="addImg">
							<u-icon name="plus" size="44" color="#AAAAAA"></u-icon>
						</view>
					</view>
				</view>
			</block>
			<block v-if="afterSaleState.returnStatus == 320">
				<u-gap></u-gap>
				<view class="box">
					<view class="title">物流公司<view @click="show = true">{{logisticsInfo.label || '请选择'}}
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="title" style="padding-right: 0;">物流单号<view style="flex: 1;">
							<u-field label-width="0" v-model="logisticsValue" :border-bottom="false" placeholder="请输入物流单号"></u-field>
						</view>
					</view>
				</view>
			</block>
			<view class="btn" @click="confirm" v-if="filterState() == '申请退款' || filterState() == '申请退货' ">
				取消申请
			</view>
			<view class="btn" @click="confirm" v-if="afterSaleState == '' || afterSaleState.returnStatus == 230 || afterSaleState.returnStatus == 330">
				{{scene == 'refund' ? '申请退款' : '申请售后'}}
			</view>

			<view class="btn" @click="confirm" v-if="afterSaleState.returnStatus == 320">
				提交退货
			</view>
			<view class="safe-area-inset-bottom"></view>

			<u-select safe-area-inset-bottom v-if="logisticsList != ''" @confirm="confirmLogistics" confirm-color="#FD4665" v-model="show" value-name="id"
			 label-name="companyName" :list="logisticsList"></u-select>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo: '',
				logisticsList: '',
				show: false,
				fail: false,
				scene:'',
				logisticsInfo: '',
				refundList: '',
				afterSaleState: '',
				refundIndex: null,
				loading: true,
				buyerReturnContext: '',
				logisticsValue: '',
				uploadImgs: '',
				fieldStyle:{
					'min-height':'200rpx'
				},
				payType:"",
				isRedintegral:false,
				total_integral:0
			};
		},
		onLoad(options) {
			this.orderNumber = options.orderNumber
			this.payType=options.payType;
			if(options.payType&&options.payType=='RED_INTEGRAL'){
				this.isRedintegral=true;
				this.total_integral=options.total_integral;
			}
			this.sceneStr = options.type
			this.photoUrls = []
			uni.setNavigationBarTitle({
				title: options.type == 'refund' ? '申请退款' : options.type == 'returnGoods' ? '申请售后' : '售后'
			})
			this.queryAfterSaleState()
			this.$u.get('orderform/info/' + options.orderNumber).then(res => {
				res.items.forEach(item => {
					item.check = false
				})
				this.goodsInfo = res
			})

			this.$u.post('orderformreturnreason/reasonAll').then(res => {
				res.forEach(item => {
					item.check = false
				})
				this.refundList = res
			})

		},
		methods: {
			close(index) {
				this.uploadImgs.splice(index, 1)
			},
			confirmLogistics(e) {
				this.logisticsInfo = e[0]
			},
			filterState() {
				if (this.afterSaleState == '') return
				switch (this.afterSaleState.returnStatus) {
					case 210:
						return '申请退款'
						break
					case 220:
						return '同意退款'
						break
					case 230:
						return '拒绝退款'
						break
					case 240:
						return '退款完成'
						break
					case 250:
						return '已取消退款'
						break
					case 310:
						return '申请退货'
						break
					case 320:
						return '同意退货'
						break
					case 330:
						return '拒绝退货'
						break
					case 340:
						return '退货完成'
						break
					case 350:
						return '已取消退货'
						break
				}
			},
			queryAfterSaleState() {
				const self = this
				this.$u.get('orderformreturn/info/' + this.orderNumber).then(res => {
					this.loading = false
					if (res == undefined) {
						this.scene = this.sceneStr
					}
					if (res == undefined) return
					if (res.returnStatus == 230 && this.sceneStr == 'refund') {
						this.scene = 'refund'
					}
					if (res.returnStatus == 330 && this.sceneStr == 'returnGoods') {
						this.scene = 'returnGoods'
					}
					if (res.returnStatus == 330 || res.returnStatus == 230) {
						this.refundIndex = this.refundList.findIndex(item => item.id == res.returnReasonId)
					}
					if (res.returnStatus == 220 || res.returnStatus == 320) {
						if (res.photoUrls != '') {
							let photoUrls = res.photoUrls.split(',')
							this.uploadImgs = photoUrls.map(item => {
								return self.imageURL + item
							})
						}
					}
					if (res.returnStatus == 320) {
						this.$u.post('shipcompany/shipCompanyList').then(res => {
							this.logisticsList = res
						})
					}
					this.afterSaleState = res
					this.buyerReturnContext = res.buyerReturnContext == '' ? '未填写备注' : res.buyerReturnContext
				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			},
			async confirm() {
				if (this.afterSaleState.returnStatus == 320) {
					await this.$u.post('orderformreturn/updateShipCode', {
						orderNumber: this.orderNumber,
						shipCode: this.logisticsValue,
						shipCompany: this.logisticsInfo.label
					})
					uni.showToast({
						title: '操作完成'
					})
					this.queryAfterSaleState()
					return
				}
				if (this.filterState() == '申请退款') {
					await this.$u.post('orderformreturn/cancelOrderReturnApply', {
						orderNumber: this.orderNumber
					})
					uni.showToast({
						title: '取消成功'
					})
					this.queryAfterSaleState()
					return
				}
				let orderformItemReturns
				if (this.scene == 'refund') {
					orderformItemReturns = this.goodsInfo.items.map(item => {
						return {
							orderItemId: item.id,
							returnGoodsCount: item.goodsCount
						}
					})
				} else {
					orderformItemReturns = this.goodsInfo.items.filter(item => item.check == true)
					if (orderformItemReturns == '') {
						let scene = this.scene == 'refund' ? '退货' : '退款'
						uni.showToast({
							title: '请选择要' + scene + '的商品',
							icon: 'none'
						})
						return
					}
				}

				if (this.refundIndex == null) {
					let scene = this.scene == 'refund' ? '退货' : '退款'
					uni.showToast({
						title: '请选择' + scene + '原因',
						icon: 'none'
					})
					return
				}
				let photoUrls = await this.uploadPhoto()
				await this.$u.post('orderformreturn/applyOrderReturn', {
					orderNumber: this.orderNumber,
					orderformItemReturns: orderformItemReturns,
					returnReasonId: this.refundList[this.refundIndex].id,
					returnType: this.scene == 'refund' ? 1 : 2,
					buyerReturnContext: this.buyerReturnContext,
					photoUrls: photoUrls
				})
				uni.showToast({
					title: '操作成功'
				})
				this.queryAfterSaleState()
			},
			addImg() {
				const self = this
				uni.chooseImage({
					success(res) {
						self.uploadImgs = [...self.uploadImgs, ...res.tempFilePaths]
					}
				})
			},
			uploadPhoto() {
				return new Promise((resolve, reject) => {
					const self = this
					if (this.uploadImgs == '') {
						resolve('')
						return
					}
					this.uploadImgs.forEach(item => {
						uni.uploadFile({
							url: self.$u.http.config.baseUrl + '/upload/userPhoto',
							filePath: item,
							name: 'file',
							async success(res) {
								let data = JSON.parse(res.data)
								if (data.code != 0) {
									uni.showToast({
										title: data.message,
										icon: 'none'
									})
									return
								}
								self.photoUrls.push(data.data[0].path + '/' + data.data[0].name)
								if (self.photoUrls.length == self.uploadImgs.length) {
									resolve(self.photoUrls.join(','))
								}
							},
							fail(error) {
								reject(error)
								uni.showToast({
									title: '上传失败！',
									icon: 'none'
								})
							}
						})
					})
				})
			},
			choiceRefund(index) {
				this.refundIndex = this.refundIndex == index ? null : index
			},
			choiceGoods(index) {
				this.goodsInfo.items[index].check = !this.goodsInfo.items[index].check
			},
			goodsPhoto(url) {
				let transformationArray = url.split(',')
				return this.imageURL + transformationArray[0]
			}
		}
	}
</script>

<style lang="scss">
	.loading {
		display: flex;
		justify-content: center;
		padding-top: 300rpx;
	}

	page {
		background-color: #F7F7F7;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.btn {
		line-height: 100rpx;
		margin-top: 50rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		box-shadow: 1px 10px 15px 2px rgba(255, 78, 70, 0.3);
		border-radius: 20rpx;
	}

	.box {
		border-radius: 20rpx;

		.upload {
			padding: 20rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			padding-right: 0;
			padding-top: 0;

			.img {
				margin-right: 20rpx;
				margin-top: 20rpx;
				position: relative;

				.close {
					position: absolute;
					top: 0;
					padding: 5rpx 10rpx;
					border-top-right-radius: 10rpx;
					right: 0;
					background-color: rgba($color: #000000, $alpha: .2);
				}
			}

			>view {
				&.add {
					margin-top: 20rpx;
					height: 147rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 147rpx;
					border: 1rpx dashed #AAAAAA;
					border-radius: 10rpx;
				}
			}
		}

		.back-list {
			border-bottom: 1rpx solid #F7F7F7;

			.item {
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;

				radio {
					transform: scale(.8);
					margin-right: 20rpx;
				}
			}
		}

		.back-money {
			view {
				&:last-child {
					color: #FE4766;
					font-weight: bold;

					text {
						font-weight: normal;
						font-size: 20rpx;
					}
				}
			}
		}

		.goods {
			padding: 30rpx;
			align-items: center;
			display: flex;
			border-bottom: 1rpx solid #F7F7F7;

			.check {
				margin-right: 20rpx;

				radio {
					transform: scale(.8);
				}
			}

			.info {
				flex: 1;
				display: flex;

				.info-content {
					margin-left: 15rpx;
					position: relative;

					.count {
						color: #AAAAAA;
					}

					.money {
						position: absolute;
						bottom: 0;
						left: 0;

						text {
							font-size: 20rpx;
						}
					}

					flex: 1;
				}
			}
		}

		.title {
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #F7F7F7;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		background-color: #FFFFFF;
	}
</style>
